<template>
	<div class="container">
		<div class="userinfo" v-if="!nosign">
			<!-- 清浮动 -->
			<div class="clear"></div>
			<!-- 默认使用微信头像,没有或者调试时使用系统头像 -->
			<div class="avatar"><img :src="head_img==''?'http://kf.laigl.com/upload/head_img/head.jpg':head_img==null?'http://kf.laigl.com/upload/head_img/head.jpg':head_img" alt="用户头像" /> </div>
			<span class="username">{{username==''?'游客':username==null?'游客':username }} </span>
		</div>
		<div class="info-box" v-if="!nosign">
			<van-cell-group v-if="finish" class="mine">
				<van-field readonly label="个人资料"  :is-link="true" @click="showinfo" left-icon="http://qnkf.laigl.com/mobilepng/myinfo.png" input-align="right"  />
				<van-field readonly left-icon="http://qnkf.laigl.com/mobilepng/anli.png" :is-link="true" @click="showAnli"  label="案例展示" input-align="right" />
				<van-field readonly left-icon="http://qnkf.laigl.com/mobilepng/liuyan.png" :is-link="true" @click="showMessage" label="留言反馈" input-align="right" />
				<van-field readonly left-icon="http://qnkf.laigl.com/mobilepng/lianxi.png" :is-link="true" @click="callPhone(15071677878)" label="联系我们" input-align="right" placeholder="15071677878" />
				<!-- <van-field readonly left-icon="http://qnkf.laigl.com/mobilepng/lianxi.png" :is-link="true" @click="clearStorage"  label="清除缓存" input-align="right" /> -->
			</van-cell-group>
		</div>
		<!-- <van-popup v-model="nosign" position="bottom" :close-on-click-overlay="false" :safe-area-inset-bottom="true" round :style="{ height: '55%' }" >
			<van-form @submit="onSubmit">
			  <van-field
			    v-model="realname"
			    name="realname"
			    label="真实姓名"
			    placeholder="真实姓名"
			    :rules="[{ required: true, message: '请填写真实姓名' }]"
			  />
			  <van-field
			    v-model="phone"
			    type="tel"
			    name="phone"
			    label="手机号码"
			    placeholder="手机号码"
			    :rules="[{ pattern, message: '请填写手机号码' }]"
			  />
				<van-field name="radio" label="性别">
				  <template #input>
				    <van-radio-group v-model="gender" direction="horizontal">
				      <van-radio name="0">男</van-radio>
				      <van-radio name="1">女</van-radio>
				    </van-radio-group>
				  </template>
				</van-field>
			  <div style="margin: 16px;">
			    <van-button round block type="info" native-type="submit">
			      提交
			    </van-button>
			  </div>
			</van-form>
		</van-popup> -->
		<footer-comp></footer-comp>
	</div>
</template>

<script>
import { Notify,Dialog  } from 'vant';
export default {
	data() {
		return {
			finish:true,//资料填写完毕
			username:'',
			anli:'',
			message:'',
			lianxi:'',
			active:0,
			userinfo:[],
			classic:[],
			clear:'',
			nosign:false,
			gender:'0',
			realname:'',
			phone:'',
			head_img:'',
			pattern:/^[1][3,4,5,7,8,9][0-9]{9}$/
		};
	},
	components: {
		[Notify.Component.name]: Notify.Component,
		[Dialog.Component.name]: Dialog.Component,
	},
	created() {
		this.getuserinfo()
		this.username = localStorage.getItem('nickname')
		this.head_img = localStorage.getItem('userheadimg')
	},
	methods:{
		// 调用拨号功能
		callPhone(phoneNumber) {
		    window.location.href = 'tel://' + phoneNumber
		},
		// 获取用户信息
		getuserinfo(){
			let openid = localStorage.getItem('openid')
			console.log(openid)
			this.$axios.post('/user/index',{openid})
			.then(res=>{
				var data = res.data.data.user_info[0]
				console.log(data)
				if(res.data.code==2000){
					this.userinfo = res.data.data.user_info,
					// localStorage.setItem("nickname", data.nick_name);
					// localStorage.setItem("userheadimg", data.portrait_image);
					// localStorage.setItem("sex", data.sex);
					// localStorage.setItem("user_id", data.user_id);
					// localStorage.setItem("res", JSON.stringify(res.data.data));
					this.classic = res.data.data.classic
				}else{
					Notify({ type: 'warnning', message: res.data.msg });
					if(res.data.msg=='请先注册'){
						this.nosign=true
					}
				}
				
			})
		},
		// 清除缓存
		clearStorage(){
			localStorage.clear()
		},
		// 用户注册
		onSubmit(values) {
			console.log('submit', values);
		},
		// 图片上传
		afterRead(file) {
			// 此时可以自行将文件上传至服务器
			console.log(file);
			Notify({ type: 'success', message: '上传成功' });
		},
		// 打开个人资料
		showinfo(){
			this.$router.push('./userinfo?id='+this.userinfo[0].id)
		},
		// 打开案例展示
		showAnli(){
			this.$router.push('./anli?user_id='+this.userinfo[0].id)
		},
		// 打开留言反馈
		showMessage(){
			this.$router.push('./message?user_id='+this.userinfo[0].id)
		},
		// 打开联系我们
		showLianxi(){
			this.$router.push('./lianxi')
		}
	}
};
</script>

<style scoped lang="less">
.container {
	overflow: hidden;
	width: 100%;
	height: 100vh;
	.userinfo {
		width: 100%;
		height: 12rem;
		background:url(http://qnkf.laigl.com/mobilepng/avator_back.png)no-repeat;
		background-size: cover;
		.clear {
			clear: both;
		}
		.avatar {
			margin-top: 2rem;
			margin-left: 2rem;
			border: .2rem solid #fff;
			float: left;
			width: 6.5rem;
			height: 6.5rem;
			overflow: hidden;
			border-radius: 4rem;
			box-shadow: .2rem .2rem 1rem #ccc;
			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
		.username {
			display: inline-block;
			font-size: 1.5rem;
			font-weight: 700;
			margin-top: 4.5rem;
			margin-left: 1rem;
		}
	}
}
</style>
